<script setup lang='ts'>
import { ref, reactive } from "vue"
import { useComListData } from "@/store/list"
import addAndEdit from "./addEdit.vue"
const { listCollect,
    getMessageList } = useComListData()
defineOptions({
    name: 'addListAd'
})
const addEditRef = ref<{ show: (title: string, row?: any) => void }>()

const emit = defineEmits(['reflash'])

const dialogBasic = ref({
    title: "短信模板列表",
    visible: false,
    width: 1300,
    height: 400,
    showFooter: true,
    marginTop: "8vh",
})

//显示弹框
const show = (type: string, row?: any) => {
    dialogBasic.value.visible = true
}
const onClose = () => {
    dialogBasic.value.visible = false
}

const onConfirm = async () => {
    onClose()
}
const editBtn=async(row:any)=>{
    try {
        console.log();
        
        addEditRef.value?.show('edit',row)
    } catch (error) {
        console.log(error);
    }
}

defineExpose({
    show
})
</script>

<template>
    <SysDialog :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
        :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" :margin-top="dialogBasic.marginTop"
        @on-close="onClose" @on-confirm="onConfirm">
        <template v-slot:content>
            <el-table :data="listCollect.messageList" stripe style="width: 100%" height="600" border>
                <el-table-column prop="templateName" label="模版名称" minWidth="100" align="center" show-overflow-tooltip />
                <el-table-column prop="templateCode" label="模版编码" minWidth="100" align="center" show-overflow-tooltip />
                <el-table-column prop="templateType" label="模板类型" minWidth="80" align="center" show-overflow-tooltip />
                <el-table-column prop="content" label="模版内容" minWidth="180" align="center" show-overflow-tooltip />
                <el-table-column prop="extInfo" label="扩展信息" show-overflow-tooltip minWidth="180" />
                <el-table-column prop="extInfo" label="扩展信息" show-overflow-tooltip width="80" align="center">
                    <template #default="scope">
                        <el-button link type="primary" @click="editBtn(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <addAndEdit @reflash="getMessageList" ref="addEditRef"></addAndEdit>

        </template>
    </SysDialog>
</template>

<style lang='scss' scoped>
.demo-ruleForm {
    max-height: 500px;
    overflow: auto;
}
</style>
